<template>
    <div class="quyu">
        <section class="content-header">
            统计分析&nbsp;/&nbsp;历史数据查询&nbsp;/&nbsp;缴费情况
        </section>
        <section class="clearfix" style="padding:15px;">
            <div class="box">
                <div class="box-body">
                    <table id="example" class="table table-bordered table-hover" style="font-size:14px;text-align:center">
                        <thead style="font-weight:700">
                            <tr>
                                <td colspan="99">缴费情况</td>
                            </tr>
                            <tr>
                                <td>月份</td>
                                <td v-for="item in month" :key="item.value">{{item}}月</td>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- <tr v-if="planList.length==0">
                                <td colspan="999">暂无数据</td>
                            </tr> -->
                            <tr>
                                <td>缴费时间</td>
                                <td v-for="item in list" :key="item.value">
                                    {{item.time}}
                                </td>
                            </tr>
                            <tr>
                                <td>缴费金额</td>
                                <td v-for="item in list" :key="item.value">
                                    {{item.costNum}}
                                </td>
                            </tr>
                            <tr>
                                <td>缴费人</td>
                                <td v-for="item in list" :key="item.value">
                                    {{item.costPerson}}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
export default {
    data() {
        return {
            month: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],
            list:[]
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        getList(){
            this.$api.tongji.costDetail({
                userNum:this.$route.query.userNum
            }).then(res=>{
                if(res.success){
                    this.list=res.data
                }
            })
        }
    }
}
</script>

<style>
</style>
